<template>
    <div class="vending-machine">
        <div class="header">
            <van-search v-model="SearchValue" placeholder="搜索商品名称" disabled shape="round"
                @click="$router.push(fun.getUrl('search', {}, { plugin_type: 'vending_machine',machineId:$route.query.machine_id}))" />
            <div class="header-right" @click="$router.push(fun.getUrl('orderlist',{status:0}))">
                <i class="iconfont icon-dingdan1"></i>
                <span style="font-size: 0.625rem;">我的订单</span>
            </div>
        </div>
        <div class="my-swipe" @click="link" v-if="banner">
            <img :src="banner" style="width: 100%;" />
        </div>
        <div class="list">
            <div class="list-item" v-for="item in list" :key="item.id" @click="$router.push(fun.getUrl('goods', { id: item.id }, { tag: 'vending_machine',machineId:machineId }))">
                <div class="img">
                    <img :src="item.thumb" />
                </div>
                <div class="content">
                    <p class="title">{{ item.title }}</p>
                    <p class="count">库存{{ item.stock }}</p>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div class="price">
                            <span style="font-size: 0.625rem;">{{ $i18n.t('money') }}</span>
                            <span>{{ item.price }}</span>
                        </div>
                        <div class="pay"
                            @click="$router.push(fun.getUrl('goods', { id: item.id }, { tag: 'vending_machine',machineId:machineId }))">立即购买
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';
export default {
    mixins: [scrollMixin],
    data() {
        return {
            SearchValue: "",
            banner_list: [],

            list: [],
            last_page: 0,
            current_page: 0,
            isLoadMore: false,

            h5_link:"",
            machineId:""
        };
    },
    activated() {
        this.isLoadMore = true;
        this.getData({page:1});
        this.getBanner()
    },
    methods: {
        link(){
            if(this.h5_link){
                window.open(this.h5_link,"_blank")
            }
        },
        getBanner() {
            $http.get("plugin.automat.frontend.index.index", { automat_machine_id: this.$route.query.machine_id }).then(res => {
                if (res.result) {
                    this.banner = res.data.banner;
                    this.h5_link = res.data.web_route;
                    this.machineId = res.data.id;
                    this.fun.setWXTitle(res.data.name);
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        getData({page}) {
            let json = {
                automat_machine_id: this.$route.query.machine_id,
                "search[automat_machine_id]":  this.$route.query.machine_id,
                page
            }
            $http.get('plugin.automat.frontend.goods.searchGoods', json).then(({ result, msg, data }) => {
                if (result == 1) {
                    this.last_page = data.last_page;
                    this.current_page = data.current_page;
                    if(page == 1){
                        this.list = data.data || [];
                    }else if(page>1){
                        this.list = this.list.concat(data.data);
                    }
                } else {
                    this.$toast(msg)
                }
                this.isLoadMore = true;
            })
        },
        getMoreData() {
            if (this.current_page >= this.last_page) {
                return;
            }
            this.isLoadMore = false;
            let page = this.current_page + 1;
            this.getData({page})
        }
    }
};
</script>

<style scoped lang="scss">
::v-deep .van-search {
  width: 100%;
  padding: 0;
}

.vending-machine {
  .title {
    font-size: 0.75rem;
    padding-right: 0.3438rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    text-align: left;
  }

  .pay {
    color: #fff;
    background: #f15353;
    border-radius: 100px;
    padding: 0.2rem 0.3rem;
    font-size: 0.75rem;
  }

  .price {
    font-size: 0.75rem;
    color: #f15353;
  }

  .count {
    color: #999;
    font-size: 0.625rem;
    text-align: left;
    margin: 0.4rem 0 0.5rem;
  }

  .content {
    padding: 0.5938rem 0.5rem 0.625rem 0.625rem;
  }

  img {
    margin: 0;
  }

  .list {
    padding: 0.625rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .list-item {
    width: 49%;
    border-radius: 0.3125rem;
    background: #fff;
    overflow: hidden;

    .img {
      width: 100%;
      height: 10.5938rem;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .my-swipe {
    margin: 0.625rem 0.625rem 0;
    border-radius: 0.3125rem;
    overflow: hidden;
  }

  .header {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 0.4375rem 0.9063rem;
  }

  .header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 0 0.0313rem 0 1.5938rem;
    flex-shrink: 0;
  }
}
</style>
